:root {
  /* redefine this var so it can be used in skin.css */
  --spectrum-colorhandle-background-offset: calc(-1 * var(--spectrum-global-dimension-static-size-25));
  --spectrum-colorhandle-checkerboard-size: var(--spectrum-global-dimension-static-size-100);

  /* todo: update DNA so this is no longer required */
  --spectrum-colorhandle-outer-border-color: rgba(0, 0, 0, 0.42);
}

.spectrum-ColorHandle {
  border-color: var(--spectrum-colorhandle-inner-border-color);
  box-shadow: 0 0 0 var(--spectrum-colorhandle-outer-border-size) var(--spectrum-colorhandle-outer-border-color);
  background: repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 50% 50% / 16px 16px;

  &.is-disabled {
    border-color: var(--spectrum-colorhandle-inner-border-color-disabled);
    background: var(--spectrum-colorhandle-fill-color-disabled);
    box-shadow: none;

    .spectrum-ColorHandle-color {
      display: none;
    }
  }
}

.spectrum-ColorHandle-color {
  box-shadow: inset 0 0 0 var(--spectrum-colorhandle-outer-border-size) var(--spectrum-colorhandle-outer-border-color);
}

@media (forced-colors: active) {
  .spectrum-ColorHandle {
    forced-color-adjust: none;
    --spectrum-colorhandle-inner-border-color-disabled: GrayText;
    --spectrum-colorhandle-fill-color-disabled: GrayText;
    --spectrum-colorhandle-inner-border-color: ButtonText;
    --spectrum-colorhandle-outer-border-color: ButtonFace;
  }
}